<template>
	<view class="content">
		<view class="top">
			<view class="my">
				<view class="my_left">
					<view class="my_img">
						<image src="/static/logo.png" alt=""></image>
					</view>
				</view>
				<view class="my_right">
					<view class="my_name">
						蜡笔小新
					</view>
					<view class="my_uid">
						霞客号：125412
					</view>

				</view>
			</view>
			<view class="my_speak">
				个性签名：学而不思则罔，思而不学则殆。
				<textarea name="" id="" cols="30" rows="10">
					个性签名：学而不思则罔，思而不学则殆。
				</textarea>
			</view>
		</view>
		<view class="bottom">
			<view class="tab">
				<view class="tab-box">
					<view class="text" :class="{'active':isActive==1}" @click="checked(1)">文章
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive==2}" @click="checked(2)">海报
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive==3}" @click="checked(3)">书法
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive==4}" @click="checked(4)">周边
						<view class="text-bot"></view>
					</view>

				</view>
			</view>
			<!-- 第一页面 -->
			<view :class="{'nav_item':isActive==1}" v-if="isActive==1">
				<view class="add">
					<!-- <img src="/static/img/fbzp.png" alt="" /> -->
				</view>
				
			</view>

			<view :class="{'nav_item':isActive==2}" v-if="isActive==2" > 
				<view class="box">
					<view class="bq_add" @click="upto">
						
					</view>
					<view class="bq_img" v-for="(item,index) in bq" >
						<image :src="item" alt=""  @click="bqimg(index)"></image>
					</view>
					
					
				</view>
				
			</view>

			<view :class="{'nav_item':isActive==3}" v-if="isActive==3">
				<view class="box">
					<view class="bq_add" @click="upto">
						
					</view>
					<view class="bq_img" v-for="(item,index) in sf">
						<image :src="item" alt=""  @click="sfimg(index)"></image>
					</view>
				
					
				</view>
			</view>

			<view :class="{'nav_item':isActive==4}" v-if="isActive==4">
				<view class="box">
					<view class="bq_add" @click="upto">
						
					</view>
					<view class="bq_img" v-for="(item,index) in zb" >
						<image :src="item" alt="" @click="zbimg(index)"  ></image>
					</view>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 1,
				bq:[
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/1.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/2.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/3.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/4.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/5.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/6.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/7.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/8.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/9.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/10.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/11.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/12.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/13.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/14.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/15.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/16.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/biaoqingbao/17.png",
					
				],
				sf:[
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf1.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf2.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf3.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf4.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf5.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf6.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf7.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/shufa/sf8.png"
				],
				zb:[
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb1.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb2.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb3.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb4.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb5.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb6.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb7.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb8.png",
					"http://123.157.242.136:8089/wxc/chuangzuo/zhoubian/zb9.png",
				]
				
			}
		},
		methods: {
			upto(){
				
				var teg=0
				uni.chooseImage({
					success() {
						
						teg=1;
						if(teg==1){
							console.log("123")
							uni.showToast({
								title:'上传成功，等待审核',
								icon:"none"
							});
							teg=0
						} 
					}
				});
				
				
			},
			checked(type) {
				this.isActive = type;

			},
			bqimg(index){
				uni.previewImage({ 
						current: index,
						urls: this.bq.map(item => item)
					});
			},
			sfimg(index){
				uni.previewImage({ 
						current: index,
						urls: this.sf.map(item => item)
					});
			},
			zbimg(index){
				uni.previewImage({ 
						current: index,
						urls: this.zb.map(item => item)
					});
			}
		}
	}
</script>

<style>
	page{
		background: url(/static/img/chuang_zuo_bj.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed
	}
	.content {
		width: 100%;
		height: 100%;
	}

	.top {
		border: transparent solid 0.1px;
		width: 750rpx;
		height: 500rpx;
		background-image: url(/static/img/cz_bg2.png);
		background-size: cover;
	}

	.my {
		margin: 30rpx auto;
		width: 600rpx;
		display: flex;
		flex-direction: row;
	}

	.my_left {
		/* border: solid 1px red; */

	}

	.my_img {
		/* border: red solid 1px; */
		width: 150rpx;
		height: 150rpx;
		background-image: url(/static/img/my_bk.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.my_img image {
		/* border: solid 1px red; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 25rpx;

	}

	.bottom {
		background-color: transparent;
	}

	.my_right {
		/* border: red solid 1px; */
		width: 450rpx;
		margin-left: 20rpx;
	}

	.my_name {
		font-size: 36rpx;
		font-weight: bold;
	}

	.my_uid {}

	.my_speak {
		/* border: red solid 1px; */
		width: 700rpx;
		margin: 20rpx auto;
		background-color: rgba(241, 248, 254, 0.5);

	}




	.tab {
		/* border: #007AFF solid 1px; */
		margin-top: -30rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background-color: azure;
		/* margin-bottom: 20rpx; */
		/* background-color: #ffe9e9; */
		/* position: sticky;
		top: 100rpx;
		z-index: 100; */
	}

	.add {
		width: 400rpx;
		height: 400rpx;
		background: url("@/static/img/fbzp.png");
		background-size: 400rpx;
		background-repeat: no-repeat;
		margin: auto;
		margin-top: 120rpx;
	}

	.tab-box {
		/* border: #0000FF solid 1px; */
		width: 700rpx;
		height: 60rpx;
		margin: auto;
		padding-top: 15rpx;
		display: flex;
		justify-content: center;

	}

	.text {
		/* border: #000000 solid; */
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		position: relative;
		/* margin: auto; */

	}

	.text-bot {
		position: absolute;
		top: 50%;
		left: 18%;
		/* z-index: 10; */
		/* border: #007AFF solid 1px;s */
		width: 80rpx;
		height: 15rpx;

		margin: auto;
		transition: background 0.4s;
	}

	.active .text-bot {
		/* border-top: #e63e3b solid 3.5px; */
		background-image: url(/static/img/underline.png);
		/* background-color: #007AFF; */
		background-repeat: no-repeat;
		/* height: 10rpx; */
		border-radius: 10rpx;
		background-size: contain;
		/* background-attachment: fixed; */

	}

	.nav_item * {
		animation: fade-in;
		/*动画名称*/
		animation-duration: 0.2s;
		/*动画持续时间*/
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		/*初始状态 透明度为0*/
		20% {
			opacity: 0.3;
		}

		50% {
			opacity: 0.5;
		}

		/*过渡状态 透明度为0*/
		100% {
			opacity: 1;
		}

		/*结束状态 透明度为1*/
	}
	
	
	
	.box{
		/* border: red solid 1px; */
		width: 670rpx;
		margin: auto;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		margin-bottom: 90rpx;
		display: flex;
		flex-direction: row;
		align-content: flex-start;
		flex-wrap:wrap
	}
	.bq_add{
		background-image: url(/static/img/fb.png);
		background-size: 100% 100%;
		width: 200rpx;
		height: 300rpx;
		/* border: red solid 1px; */
		margin-right: 30rpx;
		/* float: left; */
		margin-top: 20rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 3rpx 5rpx 5rpx #ccc;  
	}
	.bq_img{  
		box-shadow: 3rpx 3rpx 5rpx 5rpx #ccc;  
		width: 200rpx; 
		height: 300rpx;
		/* border: red solid 1px; */
		margin-right: 30rpx;
		/* float: left; */
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.bq_img:nth-child(3n){  
		margin-right: 0rpx;
	}

	.bq_img image{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
</style>
